<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
    >
      <el-form-item v-for="config in props.configs" :label="config.label" :prop="config.value">
        <el-select v-model="ruleForm[config.value]" v-if="config.type === 'select'" clearable>
          <el-option
            v-for="item in config.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-else-if="config.type === 'date'"
          v-model="ruleForm[config.value]"
          type="date"
          value-format="YYYY-MM-DD"
        />
        <el-date-picker
          v-else-if="config.type === 'daterange'"
          v-model="ruleForm[config.value]"
          type="daterange"
          range-separator="To"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
        <el-input v-else v-model="ruleForm[config.value]" autocomplete="off" />
      </el-form-item>

      <el-form-item style="margin-top: -18px;">
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >查询</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
</template>
<script lang='ts' setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

const props = defineProps(['configs', 'search'])
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<any>({
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      if(props.search) {
        props.search(ruleForm)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  if(props.search) {
    props.search(ruleForm)
  }
}

</script>
<style lang='scss' scoped>
</style>